<template>
	<view class="page">
		<UserDate />

		<view class="tcard">
			<view class="title flexR">
				<view class="">
					检验
				</view>
				<view class="money">
					￥{{totalMoney | fixed}}
				</view>
			</view>
			<view class="item" v-for="(child,index) in list" :key="index">
				<view class="">
					<view>{{child.CSFXMMC}}</view>
					<text class="money">¥{{child.MJE | fixed}}</text>
				</view>

				<!-- <view class="light-min-btn">注意事项</view> -->
			</view>
		</view>

		<view class="pay">
			<view class="">
				<text>
					合计（已选{{list.length}}项）
				</text>
				<text class="money">
					￥{{totalMoney | fixed}}元
				</text>
			</view>
			<view class="btn" @click="showConfirm">
				确定
			</view>
		</view>
		<Dialog :show.sync="show" @confirm="confirm">
			1、提交后将不能更改，如需更改，请重新申请。 <br>
			2、医生审核结果，系统会自动发送通知，请注意查收。<br>
			2、审核通过后，请注意及时缴费，否则系统将自动取消申请。
		</Dialog>
	</view>
</template>

<script>
	import UserDate from '@/components/UserInfo/user-date.vue'
	import Dialog from '@/components/Dialog/Dialog.vue'
	export default {
		components: {
			UserDate,
			Dialog
		},
		data() {
			return {
				list: [{}],
				totalMoney: 0,
				show: false
			}
		},
		onLoad(opt) {
			this.list = JSON.parse(opt.checkItems)
			this.totalMoney = opt.totalMoney
		},
		methods: {
			showConfirm() {
				this.show = true
			},
			confirm() {
				uni.navigateTo({
					url: `./DoctorAudit?totalMoney=${this.totalMoney}&checkItems=${JSON.stringify(this.list)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		justify-content: space-between;

		.money {
			color: #FF7F7F;
		}
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: rgba(0, 0, 0, 0.7);
		line-height: 44upx;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		padding: 24upx 20upx;

		::v-deep.uni-radio-input {
			width: 32upx;
			height: 32upx;
		}

		.money {
			display: flex;
			color: #FF7F7F;
			font-size: 24upx;
			line-height: 40upx;
		}

		.light-min-btn {
			// width: 260upx;
			height: 40upx;
			line-height: 40upx;
			border-radius: 40upx;
			text-align: center;
			font-size: 24upx;
			background: transparent;
			border: 1px solid $theme-color;
			color: $theme-color;
			padding: 0 16upx;
			margin-left: 32upx;
		}
	}

	.pay {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 108upx;
		padding: 0 32upx;
		box-shadow: 0px -8px 76px 22px rgba(227, 237, 255, 0.58);
		background-color: #FFF;

		.btn {
			width: 240upx;
			height: 64upx;
			background: $theme-color;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
		}

		.money {
			color: $theme-color;
			font-size: 36upx;
		}
	}
</style>